<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/crm-core/css/bootstrap_css_4/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
    <script type="text/javascript" src="/crm-core/js/bootstrap_js_4/bootstrap.bundle.js"></script>
    <script type="text/javascript" src="/crm-core/js/bs_pagination/jquery.bs_pagination.js"></script>
    <title>测试文件上传</title>
    <script>
        $(function (){
            // 使用ajax的方式异步上传文件
            $('#ajaxUploadBtn').click(function() {
                console.log("开始上传")
                var fileInput = $('#ajaxUpload')[0];
                var file = fileInput.files[0];
                var formData = new FormData();
                if(!file){
                    alert("请选择要上传的文件！")
                }
                formData.append('myFile', file);

                $.ajax({
                    url: '/crm-core/workbench/activity/fileUpload.do',
                    type: 'POST',
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function(response) {
                        console.log('上传成功');
                    },
                    error: function(xhr, status, error) {
                        console.error('上传失败');
                    },
                    xhr: function() {
                        var myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) {
                            myXhr.upload.addEventListener('progress', function(e) {
                                if (e.lengthComputable) {
                                    var percentComplete = (e.loaded / e.total) * 100;
                                    console.log(percentComplete + '% 上传完成');
                                }
                            }, false);
                        }
                        return myXhr;
                    }
                });
            });

            var fetchUploadBtn = document.getElementById("fetchUploadBtn");
            fetchUploadBtn.addEventListener("click",function (){
                const fetchUploadFile = document.getElementById("fetchUpload");
                const fetchFile = fetchUploadFile.files[0];
                console.log("开始上传了")
                if (!fetchFile) {
                    alert('请选择要上传的文件');
                    return;
                }
                const fetchFormData = new FormData();
                fetchFormData.append('myFile', fetchFile);

                fetch("/crm-core/workbench/activity/fileUpload.do",{
                    method:"POST",
                    body:fetchFormData
                }).then(response => response.json())
                    .then(data => {
                        console.log('上传成功:', data);
                    })
                    .catch(error => {
                        console.error('上传失败:', error);
                    });

            });
        });

    </script>
</head>
<body>
<!--使用form表单的形式-->
<h4>使用form表单上传文件</h4>

<form method="post" action="/crm-core/workbench/activity/fileUpload.do" enctype="multipart/form-data">
    <input type="file"  name="myFile" id="uploadedFile"/>
    <label>
        <input type="text" name="userName" />
    </label>
    <input class="btn btn-outline-secondary" type="submit" value="提交">
</form>

<hr/>
<!--使用ajax的方式上传文件-->
<h4>使用ajax的方法上传</h4>

<input type="file"  id="ajaxUpload" name="myFile">
<button class="btn btn-outline-secondary" id="ajaxUploadBtn">上传</button>

<!--使用原生fetch的方式上传文件-->
<hr/>
<h4>使用原生fetch的方式上传文件</h4>

<input type="file"  id="fetchUpload" name="myFile">
<button class="btn btn-outline-secondary" id="fetchUploadBtn">上传</button>
<hr/>
<a class="icon-link icon-link-hover" href="#">
    Icon link
    <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</body>
</html>